<template>
	<div class="center">
	  <van-uploader disabled>
	    <van-image round width="100" height="100" src="https://img01.yzcdn.cn/vant/cat.jpeg" />
	</van-uploader>
	</div> 
	<van-dropdown-menu >
				<van-dropdown-item v-model="value1" :options="option1" />
				<van-dropdown-item v-model="value2" :options="option2" />
				<van-dropdown-item v-model="value3" :options="option3" />
	</van-dropdown-menu>	
	
  <h1>这是父组件，名字叫{{ name }}</h1>
  <button type="button" @click="valueAdd">
    count is: {{ state.count }}
  </button>
  <hr/>
  <Test msg="吃了吗？" :status="state.count%2===0 ? '没吃饭' : '吃饭了'" @toFather="toFather"/>
</template>

<script setup> 
import Test from './Son.vue'; 

import {ref, reactive, onMounted} from 'vue'
import {onBeforeRouteLeave, useRoute, useRouter} from "vue-router";
const router = useRouter()
const route = useRoute()
const name = ref('张三')
const state = reactive({count: 0}) 


const valueAdd = () => { state.count++ } 
const toFather = (value) => { 
    router.push({name:'home',params:{id:value}})
  // router.push({ path: "/home", query: { id: 123 } })
   
}

onBeforeRouteLeave((to, from) => {
  const answer = window.confirm('是否确定要离开');
  if (!answer) {
    return false
  }
})
</script>

<style scoped>
a {
  color: #42b983;
}
</style>
